<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>王大为的个人介绍</title>
    <meta name="viewport" content="width=device-width， initial-scale=1 ， user-scalable=no">
    <link rel="shortcut icon" href="images/g1.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <style>

    </style>
</head>
<body>

<div id="bgmusic">
    <audio src="audio/001.mp3" autoplay loop muted></audio>
</div>




<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand">王大为</a>


        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-li"><a href="#home">个人介绍</a></li>
                <li class="nav-li"><a href="#bbs">我的技能</a></li>
                <li class="nav-li"><a href="#family">我的家人</a></li>
                <li class="nav-li"><a href="#contact">联系我</a></li>
                <li class="nav-li" style="background: cornflowerblue"><a onclick="toggleMusic()" >开始/停止</a></li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->

<!--home-->
<section id="home">
    <div class="lvjing">
        <div class="container">


            <div class="row ">
                <div class="col-md-12" style="padding-top: 0px">
                    <marquee behavior="scroll" direction="left" scrollamount="4" >
                        <h3>我是王大为，欢迎来到的我的空间</h3>
                    </marquee>
                </div>
                <hr>
                <div class="col-md-12">
                    <div class="col-md-4 col-lg-4 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">
                        <div class="col-md-12" style="margin-bottom:0px">
                            <h2>—— 帅气照 ——</h2>
                        </div>
                        <img class="zjz" src="images/zjz.jpeg" data-wow-duration="1s"
                             data-wow-delay="1s" width="100%" alt="头像"/>
                    </div>
                    <div class="col-md-2 col-lg-2 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">

                    </div>

                    <div class="col-md-4 col-lg-4 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">
                        <div class="col-md-12" style="margin-bottom:0px">
                            <h2>—— 成长照 ——</h2>
                        </div>
                        <div class="focus">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <!-- Indicators  小圆点-->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                </ol>

                                <!-- Wrapper for slides 轮播图片-->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item">
                                        <img src="images/carousel/004.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            好小的时候
                                        </div>
                                    </div>
                                    <div class="item active">
                                        <img src="images/carousel/000.jpeg" alt="...">
                                        <div class="carousel-caption">
                                           小时候
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="images/carousel/003.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            表演拉
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="images/carousel/001.jpeg" alt="...">
                                        <div class="carousel-caption">
                                          长大啦
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="images/carousel/002.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            什么啦
                                        </div>
                                    </div>


                                    <!-- ... -->
                                </div>

                                <!-- Controls 左右箭头-->
                                <a class="left carousel-control" href="#carousel-example-generic" role="button"
                                   data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button"
                                   data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<!--home-->


<!--技能-->
<section id="bbs">
    <div class="container">
        <div class="row wow fadeInUp" data-wow-duration="0.5s">
            <div class="col-md-12" style="margin-bottom:30px">
                <h2>—— 掌握技能 ——</h2>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/html.png" class="img-responsive" alt=""/>
                    <h3>前端基础</h3>
                    <p>熟练掌握 HTML、CSS、Javascript，编写代码遵循 w3c 规范</p>
                </a>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/jquery.png" class="img-responsive" alt=""/>
                    <h3>jQuery 库</h3>
                    <p>熟练掌握 jQuery 、jQuery mobile、jQuery UI ， 以及 jQuery 中相关插件的使用</p>
                </a>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/bootstrap.png" class="img-responsive" alt=""/>
                    <h3>Bootstrap 库</h3>
                    <p>熟练掌握 bootstrap 库的使用，能够快速搭建瀑布流模型网站</p>
                </a>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/java.png" class="img-responsive" alt=""/>
                    <h3>JSP开发</h3>
                    <p>掌握java服务器端开发，能够与后端紧密合作，动态加载页面数据。</p>
                </a>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/vue.png" class="img-responsive" alt=""/>
                    <h3>VUE框架</h3>
                    <p>初步入门 vue.js 2.0 框架，能够使用 Webpack 自动化模块加载及构建，vue-cli 脚手架使用</p>
                </a>
            </div>
            <div class="col-md-4">
                <a>
                    <img src="images/mac.png" class="img-responsive" alt=""/>
                    <h3>MAC下开发</h3>
                    <p>熟悉 MAC 系统下编程开发，能够在 UNIX 系统下搭建 Tomcat、JDK 等常用 Web 服务器应用</p>
                </a>
            </div>
        </div>
    </div>
</section>
<!--技能-->


<!--family-->
<section id="family">
    <div class="">
        <div class="container">
            <div class="row ">
                <div class="col-md-12">
                    <div class="col-md-4 col-lg-4 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">
                        <div class="col-md-12" style="margin-bottom:0px">
                            <h2>—— 全家福 ——</h2>
                        </div>
                        <img class="zjz" src="images/family/000.jpeg" data-wow-duration="1s"
                             data-wow-delay="1s" width="100%" alt="头像"/>
                    </div>
                    <div class="col-md-4 col-lg-4 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">

                    </div>

                    <div class="col-md-4 col-lg-4 main-right wow fadeInUp" data-wow-duration="0.5s"
                         data-wow-delay="0.5s">
                        <div class="col-md-12" style="margin-bottom:0px">
                            <h2>—— 合影啦 ——</h2>
                        </div>
                        <div class="focus">
                            <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                                <!-- Indicators  小圆点-->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                </ol>

                                <!-- Wrapper for slides 轮播图片-->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="images/family/002.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            ...
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="images/family/003.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            ...
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="images/family/001.jpeg" alt="...">
                                        <div class="carousel-caption">
                                            ...
                                        </div>
                                    </div>
                                    <!-- ... -->
                                </div>

                                <!-- Controls 左右箭头-->
                                <a class="left carousel-control" href="#carousel-example-generic" role="button"
                                   data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button"
                                   data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>


                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<!--family-->

<!--&lt;!&ndash;获奖证书&ndash;&gt;-->
<!--<section id="course">-->
<!--    <div class="container">-->

<!--    </div>-->
<!--</section>-->
<!--&lt;!&ndash;获奖证书end&ndash;&gt;-->


<!--联系我-->
<section id="contact">
    <div class="lvjing">
        <div class="container">
            <div class="row">
                <div class="col-md-6  wow fadeInLeft">
                    <h2>
                        <span class="glyphicon glyphicon-send"></span>
                        &nbsp;
                        联系我
                    </h2>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我喜欢编程和旅游，前者让我感觉到快乐与充实，后者可以让我看到不同的风景、不同且有趣的“灵魂”，”愿你历经千帆，归来仍是少年”是我的座右铭，也希望自己在成长的道路上不只是一个人。
                        <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;都看了这么久，快把我收到你碗里去吧~
                    </p>
                    <address>
                        <p>
                            <span class="glyphicon glyphicon-home"></span>
                            &nbsp;
                            地址:湖北省天门市彭市镇
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-phone-alt"></span>
                            &nbsp;
                            联系方式：18002216949
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-envelope"></span>
                            &nbsp;
                            邮箱:2433884907@qq.com
                        </p>
                    </address>
                </div>
                <div class="col-md-6  wow fadeInRight">
                    <form action="#" method="post">
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="您的姓名"/>
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control" placeholder="您的邮箱"/>
                        </div>
                        <div class="col-md-12">
                            <input type="text" class="form-control" placeholder="标题"/>
                        </div>
                        <div class="col-md-12">
                            <textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
                        </div>
                        <div class="col-md-8">
                            <input type="submit" class="form-control" value="提交"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!--联系我-->

<!--footer-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Copyright&nbsp;©&nbsp;2023&nbsp;&nbsp;版权归作者个人所有
                </p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
    $(function () {
        /*导航跳转效果插件*/
        $('.nav').singlePageNav({
            offset: 70
        });
        /*小屏幕导航点击关闭菜单*/
        $('.navbar-collapse a').click(function () {
            $('.navbar-collapse').collapse('hide');
        });
        new WOW().init();
        $('#example').popover(options)

    })

    $('.carousel').carousel({
        interval: 2000
    })

    <!--    可以使用JavaScript代码取消静音 以便正常播放背景音乐-->
    document.querySelector("#bgmusic audio").muted = false;
    function toggleMusic() {
        var music = document.querySelector("#bgmusic audio");
        if (music.paused) {
            music.play();
        } else {
            music.pause();
        }
    }

</script>
</body>
</html>